import React, { useState } from 'react'
import { DatePicker, Space, Input, Select, Row, Button, InputNumber } from 'antd'
import video from './store/video'

import './styles/outer.css'

const { RangePicker } = DatePicker
const { Option } = Select

// eslint-disable-next-line
const selectBefore = (
  <Select defaultValue="HLS" className="select-before">
    <Option value="HLS">HLS</Option>
    <Option value="FLV">FLV</Option>
  </Select>
)

function ControlBar() {
  const [size, setSize] = useState({ w: 800, h: 500 })

  return (
    <div>
      <Row>
        <Space>
          <Input addonBefore={selectBefore} defaultValue="http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" />
          <Button type="primary" onClick={() => {}}>
            播放实时视频
          </Button>
          <InputNumber defaultValue={size.w} onChange={(val) => setSize({ w: val, h: size.h })} />
          <InputNumber defaultValue={size.h} onChange={(val) => setSize({ w: size.w, h: val })} />
          <Button onClick={() => video.setVideoSize(size.w, size.h)}>改变尺寸</Button>
        </Space>
      </Row>
      {/* <Row>
        <Space>
          <RangePicker showTime format="YYYY/MM/DD HH:mm:ss" />
        </Space>
      </Row> */}
    </div>
  )
}

export default ControlBar
